<template>
  <el-card shadow="hover" v-if="data.children?.length" class="card">
    <el-space>
      <SiteIcon :icon="data.ico" />
      <div style="display: flex; flex-direction: column">
        <n-dropdown
          trigger="hover"
          :options="data.children"
          key-field="name"
          label-field="name"
          :render-label="renderDropdownLabel"
        >
          <span class="sitename">{{ data.name }}▼</span>
        </n-dropdown>
        <div class="explain" v-if="data.explain">{{ data.explain }}</div>
      </div>
    </el-space>
  </el-card>

  <a :underline="false" :href="data.url" v-else>
    <el-card shadow="hover" class="card">
      <el-space>
        <SiteIcon :icon="data.ico" />
        <div>
          <div class="sitename">{{ data.name }}</div>
          <div class="explain" v-if="data.explain">{{ data.explain }}</div>
        </div>
      </el-space>
    </el-card>
  </a>
</template>

<script setup>
import { h, ref } from 'vue'
import SiteIcon from './SiteIcon.vue'

defineProps({
  data: Object
})

function renderDropdownLabel(option) {
  return h('a', { href: option.url }, { default: () => option.name })
}
</script>

<style lang="scss" scoped>
.card {
  width: 190px;
  height: 80px;
}
.sitename {
  line-height: 16px;
  white-space: nowrap;
}
.explain {
  color: #909399;
  font-size: 14px;
  line-height: 16px;
  word-break: break-all;
}
</style>
